<template>
  <div class='container'>
    <el-card>
      <el-row type="flex" >
        <el-col :span="18" style="width:75%" >
          <el-row type="flex" justify="space-between">
          <el-form ref="formDate" :model="page" label-width="80px">
            <el-form-item label="关键字">
              <el-input v-model="page.keyword" placeholder="根据文章标题搜索"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="page.state" placeholder="请选择">
                <el-option
                label="启用"
                value="1">
                </el-option>
                 <el-option
                label="禁用"
                value="0">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="delSearch">清除</el-button>
                <el-button type="primary" @click="searchArticle">搜索</el-button>
            </el-form-item>
          </el-form>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <span>
              <el-button type="success" @click="addArticles">
                <i class="el-icon-edit"></i>
                新增技巧
              </el-button>
            </span>
          </el-row>
        </el-col>
      </el-row>
       <el-alert
          :closable="false"
           show-icon
          type="info"
          :title="`数据一共${counts}条`"
          >
        </el-alert>
        <el-table
           v-loading="loading"
            :data="tableData"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="title"
              label="文章标题"
              width="400">
            </el-table-column>
            <el-table-column
              prop="visits"
              label="阅读数"
              width="177"
              >
            </el-table-column>
            <el-table-column
              prop="username"
              label="录入人"
              width="177">
            </el-table-column>
            <el-table-column
              label="录入时间"
              width="177">
              <template slot-scope="{row}">
                {{row.createTime | formatDate}}
              </template>
            </el-table-column>
               <el-table-column
              :formatter="state"
              prop="state"
              label="状态"
              width="100">
            </el-table-column>
              <el-table-column
              label="操作"
              width="180">
            <template slot-scope="{row}">
              <el-button type="text" @click="previewBtn(row)">预览</el-button>
              <el-button type="text" @click="changeState(row)">
                {{ row.state === 0 ? '启用' : '禁用' }}
              </el-button>
              <el-button type="text" :disabled="row.state === 1" @click="editArticles(row)">修改</el-button>
              <el-button type="text" :disabled="row.state === 1" @click="delArticles(row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
         <!-- 分页 -->
          <el-pagination
          v-if="counts > 10"
          style="text-align: right;margin-top: 20px;"
          background
          @size-change="getArticleList"
          @current-change="getArticleList"
          :current-page.sync="page.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size.sync="page.pagesize"
          layout=" prev, pager, next,sizes,jumper"
          :total="counts">
    </el-pagination>
    </el-card>
     <!--  新增技巧弹框 -->
    <AddArticle ref="formDateDialog" :addDialogVisible.sync="addVisible" :id="Id" ></AddArticle>
    <!-- 预览弹层 -->
    <PreviewArticle :previewDialogVisible.sync="previewVisible" :previewTitle="previewTitles"></PreviewArticle>
  </div>
</template>

<script>
import { list, changeState, detail, remove } from '@/api/hmmm/articles'
import EmployeeEnum from '@/api/base/baseApi'
import AddArticle from '../components/AddArticle.vue'
import PreviewArticle from '..//components/PreviewArticle.vue'
export default {
  data () {
    return {
      // mianshiForm: {
      //   title: '',
      //   state: null
      // },
      loading: false,
      addVisible: false,
      previewVisible: false,
      tableData: [],
      previewTitles: {},
      page: {
        page: 1,
        pagesize: 10,
        state: null,
        keyword: ''
      },
      Id: null,
      row: {},
      counts: 0 // 总数
    }
  },
  components: {
    AddArticle,
    PreviewArticle
  },
  created () {
    this.getArticleList()
  },
  methods: {
    async getArticleList () {
      // 获取文章列表
      this.loading = true
      const res = await list(this.page)
      this.counts = res.data.counts
      this.tableData = res.data.items
      this.loading = false
    },
    state (row, column, cellValue) {
      // console.log(cellValue)
      const obj = EmployeeEnum.status.find(item => item.id === +cellValue)
      return obj && obj.value
    },
    searchArticle () {
      // // 文章搜索
      // const newTitle = []
      // this.tableData.find(item => {
      //   if (item.title === this.mianshiForm.title) { return newTitle.push(item) }
      // })
      // this.tableData = newTitle
      this.getArticleList()
    },
    delSearch () {
      // 清除
      this.page.keyword = ''
      this.page.state = null
    },
    addArticles () {
      // 新增技巧
      this.addVisible = true
    },
    async changeState (row) {
      // console.log(id, state)
      if (row.state === 0) {
        row.state = 1
      } else if (row.state === 1) {
        row.state = 0
      }
      try {
        // 调用接口
        await changeState(row)
        this.$message.success('操作成功')
      } catch (error) {
        this.$message.success('操作失败')
      }

      // 更新页面
      this.getArticleList()
    },
    async  previewBtn (row) {
      // 预览按钮
      this.previewVisible = true
      const { data } = await detail(row)
      this.previewTitles = data
    },
    async  editArticles (row) {
      // 修改文章
      // 1打开弹层
      this.addVisible = true
      // 2 回显数据
      const { data } = await detail(row)
      this.$refs.formDateDialog.formDate = data
      // 点击修改按钮把id传过去
      this.Id = data.id
    },
    async delArticles (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 删除文章
        await remove(row)
        // 更新视图
        this.getArticleList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {

      })
    }
  }
}
</script>

<style scoped lang='less'>
  .container{
    padding: 10px;
  }
  ::v-deep .el-form-item {
    display: inline-block;
  }
</style>
